<!-- pages/addAdmin/addAdmin.vue -->
<template>
  <view class="add-admin-container">
    <!-- 表单区域 -->
    <view class="form-card">
      <uni-forms :model="formData" :rules="rules" ref="formRef">
        <uni-forms-item label="管理员账号" name="username" required>
          <uni-easyinput 
            v-model="formData.username" 
            placeholder="请输入4-16位字母数字组合"
          />
        </uni-forms-item>

        <uni-forms-item label="登录密码" name="password" required>
          <uni-easyinput 
            type="password" 
            v-model="formData.password"
            placeholder="至少包含字母、数字，8-20位"
          />
        </uni-forms-item>

        <uni-forms-item label="权限角色" name="role" required>
          <uni-data-select
            v-model="formData.role"
            :localdata="roleOptions"
          />
        </uni-forms-item>

        <uni-forms-item label="联系邮箱" name="email">
          <uni-easyinput 
            v-model="formData.email"
            placeholder="选填，用于接收系统通知"
          />
        </uni-forms-item>

        <button 
          class="submit-btn" 
          :disabled="submitting" 
          @tap="handleSubmit"
        >
          {{ submitting ? '提交中...' : '确认添加' }}
        </button>
      </uni-forms>
    </view>

    <!-- 权限说明 -->
    <view class="permission-info">
      <text class="title">权限说明：</text>
      <view class="permission-item">
        <uni-icons type="staff" size="18" color="#3498db"/>
        <text>超级管理员 - 拥有系统全部管理权限</text>
      </view>
      <view class="permission-item">
        <uni-icons type="person" size="18" color="#2ecc71"/>
        <text>普通管理员 - 仅限内容审核和用户管理</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: '',
        role: 'normal',
        email: ''
      },
      rules: {
        username: {
          rules: [{
            required: true,
            errorMessage: '账号不能为空'
          },{
            validateFunction: (rule, value, data, callback) => {
              if (!/^[a-zA-Z0-9]{4,16}$/.test(value)) {
                callback('账号格式不正确')
              }
              return true
            }
          }]
        },
        password: {
          rules: [{
            required: true,
            errorMessage: '密码不能为空'
          },{
            validateFunction: (rule, value, data, callback) => {
              if (!/^(?=.*[A-Za-z])(?=.*\d).{8,20}$/.test(value)) {
                callback('需包含字母和数字')
              }
              return true
            }
          }]
        },
        email: {
          rules: [{
            validateFunction: (rule, value, data, callback) => {
              if (value && !/^\w+@[a-z0-9]+\.[a-z]{2,4}$/.test(value)) {
                callback('邮箱格式不正确')
              }
              return true
            }
          }]
        }
      },
      roleOptions: [
        { value: 'super', text: '超级管理员' },
        { value: 'normal', text: '普通管理员' }
      ],
      submitting: false
    }
  },
  onLoad() {
    // this.checkPermission()
  },
  methods: {
    // 权限验证
    checkPermission() {
      if (!getApp().globalData.isAdmin || getApp().globalData.adminRole !== 'super') {
        uni.redirectTo({ url: '/pages/admin/login' })
      }
    },

    // 提交表单
    async handleSubmit() {
      try {
        const valid = await this.$refs.formRef.validate()
        if (!valid) return

        this.submitting = true
        // 模拟API请求
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        uni.showToast({
          title: '添加成功',
          icon: 'success',
          success: () => {
            this.formData = {
              username: '',
              password: '',
              role: 'normal',
              email: ''
            }
          }
        })
      } catch (error) {
        uni.showToast({
          title: error.message || '添加失败',
          icon: 'none'
        })
      } finally {
        this.submitting = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.add-admin-container {
  padding: 30rpx;
  min-height: 100vh;
  background-color: #f5f7fa;
}

.form-card {
  background: white;
  padding: 40rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);

  .submit-btn {
    margin-top: 40rpx;
    background: #3498db;
    color: white;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 12rpx;
    font-size: 32rpx;

    &[disabled] {
      background: #bdc3c7;
    }
  }
}

.permission-info {
  margin-top: 40rpx;
  padding: 30rpx;
  background: white;
  border-radius: 16rpx;

  .title {
    display: block;
    font-size: 32rpx;
    color: #2c3e50;
    margin-bottom: 20rpx;
    font-weight: bold;
  }

  .permission-item {
    display: flex;
    align-items: center;
    margin: 20rpx 0;
    font-size: 28rpx;
    color: #666;

    uni-icons {
      margin-right: 15rpx;
    }
  }
}

::v-deep .uni-forms-item__label {
  font-weight: bold !important;
  color: #34495e !important;
}
</style>